<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
    <div id="app">
        <span ref="test">我是span</span>
        <v-child ref="child"></v-child>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>

    /*在组件的模板上打ref ;如果ref标记的是一个普通元素
        那么在组件的$refs属性上就可以找到对应名字的dom节点
    在组件的模板上打ref ;如果ref标记的是一个子组件
        那么在组件的$refs属性上就可以找到对应名字的vueComponent实例对象*/
    new Vue({
        el:"#app",
        mounted(){
            console.log(this.$refs.test)
        },
        components:{
            "v-child":{
                template:`<span>我是v-child</span>`
            }
        }
    })
</script>
</html>